<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="./static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./static/bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="./static/js/bootstrap-paginator.js"></script>
    <script type="text/javascript" src="./static/js/vue.js"></script>
    <title>HRMS 酒店管理系统</title>
</head>
<body>

<!--主体-->
<div class="container">

    <!--顶部导航栏-->
    <div>
        <nav class="navbar navbar-default" role="navigation" style="border: none; border-bottom: 1px solid #aaa;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">HRMS 酒店客房管理系统</a>
                </div>

                <div class="dropdown"  style="float: right; margin-top: 0px; margin-right: 20px">
                    <div style="float: right; margin-top: 25px; margin-right: 20px; cursor: pointer; color: #5e5e5e" id="dropdownMenu1" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user"></span>&nbsp;
                        <span id="user">admin</span>
                        <span class="caret"></span>
                    </div>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation">
                            <a
                                    role="menuitem"
                                    tabindex="-1"
                                    href="#"
                                    data-toggle="modal"
                                    data-target="#changePasswordModal"
                            >修改密码</a>
                        </li>
                        <li role="presentation">
                            <a
                                    role="menuitem"
                                    tabindex="-1"
                                    href="#"
                                    id="logout"
                            >安全退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <script>

        $(function (){

            //退出登录
            function logout(){
                $.ajax({
                    url: "/user/logout",
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.code === "OK") {
                            window.location.href = "/login.html";
                        }
                        alert(data.msg);
                    }
                })
            }

            //退出登录
            $("#logout").on("click", function (){
                logout();
            })

            //当前登录者
            let thisUser = {};

            //查看当前登录者
            $.ajax({
                url: "/user/getUser",
                type: "GET",
                dataType: "json",
                success: function (data) {
                    $("#user").html(data.data.username);
                    thisUser = data.data;
                }
            })

            //修改密码
            function changePassword(){
                //获取表单信息
                let users = [];
                users[0] = new Object({
                    userId: thisUser.userId,
                    password: $("#oldPassword").val()
                });
                users[1] = new Object({
                    userId: thisUser.userId,
                    password: $("#newPassword").val()
                })
                //发送请求
                $.ajax({
                    url: "/user/changePassword",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(users),
                    success: function (data) {
                        alert(data.msg);
                        if (data.code === "OK") {
                            logout();
                        }
                    }
                })
                //关闭模态框
                $("#changePasswordModal").modal("hide");
            }

            //修改密码
            $("#changePasswordModal .modal-footer .submit").on("click", function (){
                changePassword();
            })

        })

    </script>

    <!--下部-->
    <div id="bottom">

        <!--左侧导航栏-->
        <div>

            <ul class="nav-left nav nav-pills nav-stacked col-md-2" style="border-right: 2px solid #aaa;">
                <li class="active"
                    target_id="#index"
                    @click="getSystemInfo"
                ><a href="#"><span class="glyphicon glyphicon-list"></span>&nbsp;&nbsp;首页</a></li>
                <li target_id="#recordInfo"
                    @click="getRecordInfoList(1, 10)"
                ><a href="#"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;入住记录</a></li>
                <li target_id="#roomInfo"
                    @click="getRoomInfoList(1, 10)"
                ><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;房间管理</a></li>
                <li target_id="#roomType"
                    @click="getRoomTypeList(1, 10)"
                ><a href="#"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;房间类型管理</a></li>
                <li target_id="#guests"
                    @click="getGuestsList(1, 10)"
                ><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;客户管理</a></li>
                <li target_id="#vipInfo"
                    @click="getVipInfoList(1, 10)"
                ><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;VIP客户管理</a></li>
                <li target_id="#setting"
                    @click="getSystemInfo"
                ><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;系统设置</a></li>
            </ul>

            <script>

                $(function(){
                    // 切换导航
                    $(".nav-left li").click(function(){
                        $(".nav-left li").removeClass("active");
                        $(this).addClass("active");
                        console.log($(".rightMain"));
                        $(".rightMain").css("display", "none");
                        console.log($(this).attr("target_id"));
                        $($(this).attr("target_id")).css("display", "block");
                    });
                })

            </script>

        </div>

        <!--右侧切换区域-->
        <div class="col-md-10">

            <!--首页-->
            <div id="index" class="rightMain" style="display: block;">
                <h4 class="col-md-offset-1">
                    {{systemInfo.welcomeWords}}
                </h4>
            </div>

            <!--入住记录-->
            <div id="recordInfo" class="rightMain" style="display: none;">

                <div style="font-size: 18px;">---------入住列表---------</div>

                <div style="margin: 10px 0; overflow: hidden;">
                    <div class="checkbox" style="float: left; margin-left: 5px;">
                        <label>
                            <input type="checkbox"
                                   checked
                                   id="recordInfoCheckbox"
                                   @change="recordInfoCheckboxChange"
                            >只显示未退房记录
                        </label>
                    </div>
                    <button
                            class="btn btn-primary"
                            style="float: right; margin-left: 20px"
                            data-toggle="modal"
                            data-target="#checkInModal"
                    ><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;入住登记</button>
                    <button
                            class="btn btn-primary"
                            style="float: right;"
                            @click="getRecordInfoList(1, 10)"
                    ><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;刷新</button>
                    <button
                            class="btn btn-primary"
                            style="float: right; margin: 0 20px; margin-left: 0;"
                            @click="getRecordInfoList(1, 10)"
                    ><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;查询</button>
                    <input
                            style="display: inline; width: 200px; float: right; margin: 0;"
                            type="text"
                            class="form-control"
                            placeholder="请输入住客姓名进行查询"
                            v-model="recordInfo.query.guestName"
                    >
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>房间号</th>
                        <th>入住时间</th>
                        <th>退房时间</th>
                        <th>预定时间</th>
                        <th>手机号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--表格主题-->
                    <tr v-for="recordInfo in recordInfo.list">
                        <td>{{recordInfo.guestName}}</td>
                        <td>{{recordInfo.guestGander}}</td>
                        <td>{{recordInfo.roomNo}}</td>
                        <td>{{recordInfo.enterTime}}</td>
                        <td>{{recordInfo.exitTime}}</td>
                        <td>{{recordInfo.bookingDuration}}</td>
                        <td>{{recordInfo.guestPhoneNumber}}</td>
                        <td>
                            <a
                                    class="text-info"
                                    style="cursor: pointer"
                                    @click="getRecordDetail(recordInfo)"
                            >详情&nbsp;/&nbsp;修改</a>&nbsp;|&nbsp;
                            <a
                                    class="text-danger"
                                    style="cursor: pointer"
                                    @click="deleteRecordInfo(recordInfo)"
                            >删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div style="text-align: center"><ul id="recordInfoPaginator" style="cursor: pointer"></ul> </div>

            </div>

            <!--房间管理-->
            <div id="roomInfo" class="rightMain" style="display: none;">

                <div style="font-size: 18px;">---------房间列表---------</div>

                <div style="margin: 10px 0; overflow: hidden;">
                    <button
                            class="btn btn-primary"
                            style="float: right; margin-left: 20px"
                            data-toggle="modal"
                            data-target="#addRoomModal"
                    ><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加</button>
                    <button class="btn btn-primary" style="float: right;" @click="getRoomInfoList(1, 10)"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;刷新</button>
                    <button class="btn btn-primary"
                            style="float: right; margin: 0 20px; margin-left: 0;"
                            @click="getRoomInfoList(1,10)"
                    ><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;查询</button>
                    <input style="display: inline; width: 200px; float: right; margin: 0;"
                           type="text"
                           class="form-control"
                           placeholder="请输入房间号进行查询"
                           v-model="roomInfo.query.roomNo"
                    >
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>房间号</th>
                        <th>房间类型</th>
                        <th>价格/天</th>
                        <th>价格/4小时</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="roomInfo in roomInfo.list">
                        <td>{{roomInfo.roomNo}}</td>
                        <td>{{roomInfo.roomTypeName}}</td>
                        <td>{{roomInfo.dayPrice}}元</td>
                        <td>{{roomInfo.hourPrice}}元</td>
                        <td>{{roomInfo.roomStatus}}</td>
                        <td>
                            <a
                                    class="text-info roomDetail"
                                    style="cursor: pointer"
                                    @click="getRoomDetail(roomInfo)"
                            >详情&nbsp;/&nbsp;修改</a>&nbsp;|&nbsp;
                            <a
                                    class="text-danger"
                                    style="cursor: pointer"
                                    @click="deleteRoom(roomInfo)"
                            >删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div style="text-align: center"><ul id="roomInfoPaginator" style="cursor: pointer"></ul> </div>

            </div>

            <!--房间类型管理-->
            <div id="roomType" class="rightMain" style="display: none;">

                <div style="font-size: 18px;">---------房间类型列表---------</div>

                <div style="margin: 10px 0; overflow: hidden;">
                    <button
                            class="btn btn-primary"
                            style="float: right; margin-left: 20px"
                            data-toggle="modal"
                            data-target="#addRoomTypeModal"
                    ><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加</button>
                    <button
                            class="btn btn-primary"
                            style="float: right;"
                            @click="getRoomTypeList(1, 10)"
                    ><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;刷新</button>
                    <button
                            class="btn btn-primary"
                            style="float: right; margin: 0 20px; margin-left: 0;"
                            @click="getRoomTypeList(1, 10)"
                    ><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;查询</button>
                    <input style="display: inline; width: 200px; float: right; margin: 0;"
                           type="text"
                           class="form-control"
                           placeholder="请输入房间类型名称进行查询"
                           v-model="roomType.query.roomTypeName"
                    >
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>房间类型</th>
                        <th>价格/天</th>
                        <th>价格/4小时</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="roomType in roomType.list">
                        <td>{{roomType.roomTypeId}}</td>
                        <td>{{roomType.roomTypeName}}</td>
                        <td>{{roomType.dayPrice}}元</td>
                        <td>{{roomType.hourPrice}}元</td>
                        <td>
                            <a
                                    class="text-info"
                                    style="cursor: pointer"
                                    @click="getRoomTypeDetail(roomType)"
                            >详情&nbsp;/&nbsp;修改</a>&nbsp;|&nbsp;
                            <a
                                    class="text-danger"
                                    style="cursor: pointer"
                                    @click="deleteRoomType(roomType)"
                            >删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div style="text-align: center"><ul id="roomTypePaginator" style="cursor: pointer"></ul> </div>

            </div>

            <!--客户管理-->
            <div id="guests" class="rightMain" style="display: none;">

                <div style="font-size: 18px;">---------客户列表---------</div>

                <div style="margin: 10px 0; overflow: hidden;">
                    <button
                            class="btn btn-primary"
                            style="float: right; margin-left: 20px"
                            data-toggle="modal" data-target="#addGuestsModal"
                    ><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加</button>
                    <button
                            class="btn btn-primary"
                            style="float: right;"
                            @click="getGuestsList(1, 10)"
                    ><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;刷新</button>
                    <button
                            class="btn btn-primary"
                            style="float: right; margin: 0 20px; margin-left: 0;"
                            @click="getGuestsList(1, 10)"
                    ><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;查询</button>
                    <input
                            style="display: inline; width: 200px; float: right; margin: 0;"
                            type="text"
                            class="form-control"
                            v-model="guests.query.guestName"
                            placeholder="请输入客户姓名进行查询"
                    >
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>身份证号码</th>
                        <th>电话号码</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="guests in guests.list">
                        <td>{{guests.guestId}}</td>
                        <td>{{guests.guestName}}</td>
                        <td>{{guests.guestGander}}</td>
                        <td>************</td>
                        <td>{{guests.guestPhoneNumber}}</td>
                        <td>
                            <a
                                    class="text-info"
                                    style="cursor: pointer"
                                    @click="upToVip(guests)"
                            >升级为VIP</a>&nbsp;|&nbsp;
                            <a
                                    class="text-info"
                                    style="cursor: pointer"
                                    @click="getGuestsDetail(guests)"
                            >详情&nbsp;/&nbsp;修改</a>&nbsp;|&nbsp;
                            <a
                                    class="text-danger"
                                    style="cursor: pointer"
                                    @click="deleteGuests(guests)"
                            >删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div style="text-align: center"><ul id="guestsPaginator" style="cursor: pointer"></ul> </div>

            </div>

            <!--VIP管理-->
            <div id="vipInfo" class="rightMain" style="display: none;">

                <div style="font-size: 18px;">---------VIP客户列表---------</div>

                <div style="margin: 10px 0; overflow: hidden;">
                    <button
                            class="btn btn-primary"
                            style="float: right; margin-left: 20px"
                            data-toggle="modal" data-target="#addVipGuestsModal"
                    ><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;添加</button>
                    <button
                            class="btn btn-primary"
                            style="float: right;"
                            @click="getVipInfoList(1, 10)"
                    ><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;刷新</button>
                    <button
                            class="btn btn-primary"
                            style="float: right; margin: 0 20px; margin-left: 0;"
                            @click="getVipInfoList(1, 10)"
                    ><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;查询</button>
                    <input
                            style="display: inline; width: 200px; float: right; margin: 0;"
                            type="text"
                            class="form-control"
                            v-model="vipInfo.query.guestName"
                            placeholder="请输入VIP客户姓名进行查询"
                    >
                </div>

                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>卡号</th>
                        <th>电话号码</th>
                        <th>积分</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="vipInfo in vipInfo.list">
                        <td>{{vipInfo.vipId}}</td>
                        <td>{{vipInfo.guestName}}</td>
                        <td>{{vipInfo.guestGander}}</td>
                        <td>{{vipInfo.vipCard}}</td>
                        <td>{{vipInfo.guestPhoneNumber}}</td>
                        <td>{{vipInfo.vipIntegral}}</td>
                        <td>
                            <a
                                    class="text-info"
                                    style="cursor: pointer"
                                    @click="getVipInfoDetail(vipInfo)"
                            >详情&nbsp;/&nbsp;修改</a>&nbsp;|&nbsp;
                            <a
                                    class="text-danger"
                                    style="cursor: pointer"
                                    @click="deleteVipInfo(vipInfo)"
                            >删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <div style="text-align: center"><ul id="vipInfoPaginator" style="cursor: pointer"></ul> </div>

            </div>

            <!--系统设置-->
            <div id="setting" class="rightMain" style="display: none;">

                <div style="font-size: 18px;">---------系统设置---------</div>

                <form class="form-horizontal" role="form" style="margin-top: 35px">
                    <div class="form-group">
                        <label for="systemName" class="col-md-2 control-label">酒店名称</label>
                        <div class="col-md-8">
                            <input type="text"
                                   class="form-control"
                                   id="systemName"
                                   :placeholder="systemInfo.hotelName"
                                   v-model="systemInfo.hotelName"
                            >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="systemTitle" class="col-md-2 control-label">系统名称</label>
                        <div class="col-md-8">
                            <input type="text"
                                   class="form-control"
                                   id="systemTitle"
                                   :placeholder="systemInfo.systemName"
                                   v-model="systemInfo.systemName"
                            >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="welcome" class="col-md-2 control-label">欢迎词</label>
                        <div class="col-md-8">
                            <input
                                    type="text"
                                    class="form-control"
                                    id="welcome"
                                    :placeholder="systemInfo.welcomeWords"
                                    v-model="systemInfo.welcomeWords"
                            >
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button
                                    type="submit"
                                    class="btn btn-primary"
                                    @click="updateSystemInfo"
                            >确认修改</button>
                        </div>
                    </div>
                </form>

            </div>

        </div>

    </div>
    <!--下部script-->
    <script>

        const vm = new Vue({
            el: "#bottom",
            data() {
                return {
                    recordInfo: {
                        query: {
                            guestName: "",
                            exitTime: "待定"
                        },
                        list: []
                    },
                    roomInfo: {
                        query: {
                            roomNo: ""
                        },
                        list: []
                    },
                    roomType: {
                        query: {
                            roomTypeName: ""
                        },
                        list: []
                    },
                    guests: {
                        query: {
                            guestName: ""
                        },
                        list: []
                    },
                    vipInfo: {
                        query: {
                            guestName: ""
                        },
                        list: []
                    },
                    systemInfo: {}
                }
            },
            methods: {
                getRecordInfoList(page, perPage){
                    $.ajax({
                        url: "/recordInfo/" + page + "/" + perPage,
                        type: "GET",
                        data: vm.recordInfo.query,
                        success: function (data) {
                            if(data.code === "OK") {
                                vm.recordInfo.list = data.data.data
                                setPage("#recordInfoPaginator", data.data.page, data.data.pageTotal, vm.getRecordInfoList);
                            }
                        }
                    })
                    vm.recordInfo.query.guestName = "";
                },
                getRoomInfoList(page, perPage){
                    $.ajax({
                        url: "/roomInfo/" + page + "/" + perPage,
                        type: "GET",
                        data: vm.roomInfo.query,
                        success: function (data) {
                            if(data.code === "OK") {
                                vm.roomInfo.list = data.data.data
                                setPage("#roomInfoPaginator", data.data.page, data.data.pageTotal, vm.getRoomInfoList);
                            }
                        }
                    })
                    vm.roomInfo.query = {};
                },
                getRoomTypeList(page, perPage){
                    $.ajax({
                        url: "/roomType/" + page + "/" + perPage,
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: vm.roomType.query,
                        success: function (data) {
                            if(data.code === "OK") {
                                vm.roomType.list = data.data.data
                                setPage("#roomTypePaginator", data.data.page, data.data.pageTotal, vm.getRoomTypeList);
                            }
                        }
                    })
                    vm.roomType.query = {};
                },
                getGuestsList(page, perPage){
                    $.ajax({
                        url: "/guests/" + page + "/" + perPage,
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: vm.guests.query,
                        success: function (data) {
                            if(data.code === "OK") {
                                vm.guests.list = data.data.data;
                                setPage("#guestsPaginator", data.data.page, data.data.pageTotal, vm.getGuestsList);
                            }
                        }
                    })
                    vm.guests.query = {};
                },
                getVipInfoList(page, perPage){
                    $.ajax({
                        url: "/vipInfo/" + page + "/" + perPage,
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: vm.vipInfo.query,
                        success: function (data) {
                            if(data.code === "OK") {
                                vm.vipInfo.list = data.data.data;
                                setPage("#vipInfoPaginator", data.data.page, data.data.pageTotal, vm.getVipInfoList);
                            }
                        }
                    })
                    vm.vipInfo.query = {};
                },
                getSystemInfo(){
                    $.ajax({
                        url: "systemInfo/getSystemInfo",
                        type: "GET",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if(data.code === "OK") {
                                vm.systemInfo = data.data
                            }
                        }
                    })
                },
                getRoomDetail(roomInfo){
                    //清空表单
                    $("#detailRoomModal .modal-body .form-control").val("");
                    $("#detailRoomTypeId").html("");
                    //请求下拉框数据
                    $.ajax({
                        async: false,
                        url: "/roomType/getAll",
                        type: "GET",
                        success: function (data) {
                            if(data.code === "OK") {
                                for(let i=0; i<data.data.length; i++){
                                    $("#detailRoomTypeId").append("<option value='"+data.data[i].roomTypeId+"'>"+data.data[i].roomTypeName+"</option>");
                                }
                            }
                        }
                    })
                    //设置模态框表单
                    $("#detailRoomId").val(roomInfo.roomId);
                    $("#detailRoomNo").val(roomInfo.roomNo);
                    $("#detailRoomTypeId").val(roomInfo.roomTypeId);
                    $("#detailRoomStatus input:radio[value="+roomInfo.roomStatus+"]")[0].checked = true;
                    //打开模态框
                    $("#detailRoomModal").modal("show");
                },
                deleteRoom(roomInfo){
                    $.ajax({
                        url: "/roomInfo/delete",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(roomInfo.roomId),
                        success: function (data) {
                            if(data.code === "OK") {
                                alert(data.msg);
                            }
                        }
                    })
                },
                getRoomTypeDetail(roomType){
                    //设置模态框表单
                    $("#detailRoomTypeIdx").val(roomType.roomTypeId);
                    $("#detailRoomTypeName").val(roomType.roomTypeName);
                    $("#detailRoomTypeDescription").val(roomType.roomTypeDescription);
                    $("#detailDayPrice").val(roomType.dayPrice);
                    $("#detailHourPrice").val(roomType.hourPrice);
                    //打开模态框
                    $("#detailRoomTypeModal").modal("show");
                },
                deleteRoomType(roomType){
                    $.ajax({
                        url: "/roomType/delete",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(roomType.roomTypeId),
                        success: function (data) {
                            if(data.code === "OK") {
                                alert(data.msg);
                            }
                        }
                    })
                },
                getGuestsDetail(guests){
                    //向表单内添入信息
                    $("#detailGuestId").val(guests.guestId);
                    $("#detailGuestName").val(guests.guestName);
                    $("#detailGuestGander input:radio[value="+guests.guestGander+"]")[0].checked = true;
                    $("#detailGuestIdcard").val(guests.guestIdcard);
                    $("#detailGuestPhoneNumber").val(guests.guestPhoneNumber);
                    //显示模态框
                    $("#detailGuestsModal").modal("show");
                },
                deleteGuests(guests){
                    $.ajax({
                        url: "/guests/delete",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(guests.guestId),
                        success: function (data) {
                            if(data.code === "OK") {
                                alert(data.msg);
                            }
                        }
                    })
                },
                upToVip(guests){
                    $.ajax({
                        url: "/guests/upToVip",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(guests.guestId),
                        success: function (data) {
                            if(data.code === "OK") {
                                alert(data.msg);
                            }
                        }
                    })
                },
                getVipInfoDetail(vipInfo){
                    //向表单内添入信息
                    $("#detailVipId").val(vipInfo.vipId);
                    $("#detailVipGuestName").val(vipInfo.guestName);
                    $("#detailVipGuestGander input:radio[value="+vipInfo.guestGander+"]")[0].checked = true;
                    $("#detailVipGuestIdcard").val(vipInfo.guestIdcard);
                    $("#detailVipGuestPhoneNumber").val(vipInfo.guestPhoneNumber);
                    $("#detailVipGuestIntegral").val(vipInfo.vipIntegral);
                    $("#detailVipCard").val(vipInfo.vipCard);
                    //显示模态框
                    $("#detailVipGuestsModal").modal("show");
                },
                deleteVipInfo(vipInfo){
                    $.ajax({
                        url: "/vipInfo/delete",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(vipInfo.vipId),
                        success: function (data) {
                            alert(data.msg);
                        }
                    })
                },
                updateSystemInfo(){
                    $.ajax({
                        async: false,
                        url: "/systemInfo/update",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(vm.systemInfo),
                        success: function (data) {
                            alert(data.msg);
                        }
                    })
                    console.log(vm.systemInfo)
                    vm.getSystemInfo();
                },
                recordInfoCheckboxChange(){
                    //判断是否选中
                    if($("#recordInfoCheckbox").prop("checked")){
                        vm.recordInfo.query.exitTime = "待定";
                    }else {
                        vm.recordInfo.query.exitTime = "";
                    }
                    vm.getRecordInfoList(1, 10);
                },
                getRecordDetail(recordInfo){
                    //设置表单
                    $("#detailRecordId").val(recordInfo.recordId);
                    $("#detailRecordGuestName").val(recordInfo.guestName);
                    $("#detailRecordGuestGander").val(recordInfo.guestGander);
                    $("#detailRecordGuestIdcard").val(recordInfo.guestIdcard);
                    $("#detailRecordGuestPhoneNumber").val(recordInfo.guestPhoneNumber);
                    $("#detailRecordRoomType").val(recordInfo.roomTypeName);
                    $("#detailRecordRoomNo").val(recordInfo.roomNo);
                    $("#detailRecordEnterTime").val(recordInfo.enterTime);
                    $("#detailRecordExitTime").val(recordInfo.exitTime);
                    //显示模态框
                    $("#detailRecordModal").modal("show");
                },
                deleteRecordInfo(recordInfo){
                    $.ajax({
                        url: "/recordInfo/delete",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        data: JSON.stringify(recordInfo.recordId),
                        success: function (data) {
                            alert(data.msg);
                        }
                    })
                }
            }
        })
        vm.getSystemInfo();

    </script>

</div>

<!--模态框-->
<div>

    <!--顶部导航栏-->
    <div>

        <!--修改密码-->
        <div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改密码</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="oldPassword" class="col-sm-2 control-label">旧密码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="password"
                                            class="form-control"
                                            id="oldPassword"
                                            placeholder="请输入旧密码"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="newPassword" class="col-sm-2 control-label">新密码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="password"
                                            class="form-control"
                                            id="newPassword"
                                            placeholder="请输入新密码"
                                    >
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //清空表单
                $("#changePasswordModal").on("show.bs.modal",  function(){
                    $("#changePasswordModal .modal-body input").val("");
                })

            })

        </script>

    </div>

    <!--入住记录-->
    <div>

        <!--入住登记-->
        <div class="modal fade" id="checkInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">入住登记</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="checkInRoomTypeId" class="col-sm-2 control-label">房间类型</label>
                                <div class="col-sm-5">
                                    <select id="checkInRoomTypeId" class="form-control">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="checkInRoomId" class="col-sm-2 control-label">房间号</label>
                                <div class="col-sm-5">
                                    <select id="checkInRoomId" class="form-control">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="checkInEnterTime" class="col-sm-2 control-label">入住时间</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="checkInEnterTime"
                                            placeholder="请输入入住时间"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label  class="col-sm-2 control-label">入住期限</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            id="checkInDay"
                                            placeholder="单位：天"
                                            class="exceptGuestForm"
                                    >
                                    <input
                                            type="text"
                                            id="checkInHour"
                                            placeholder="单位：小时"
                                            class="exceptGuestForm"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="checkInCost" class="col-sm-2 control-label">金额</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="checkInCost"
                                            placeholder="请输入金额"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">添加入住者</label>
                                <div class="col-sm-8">
                                    <button
                                            class="btn btn-default"
                                            style="margin-left: 10px"
                                            id="guestReduce"
                                    >-</button>
                                    <span id="guestNum">1</span>
                                    <button
                                            class="btn btn-default"
                                            id="guestAdd"
                                    >+</button>
                                </div>
                            </div>
                            <div id="guestForm">
                                <div class="form-group addGuest">
                                    <label for="checkInCost" class="col-sm-2 control-label">入住者</label>
                                    <div class="col-sm-10">
                                        <form class="form-horizontal" role="form">
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">姓名</label>
                                                <div class="col-sm-8">
                                                    <input
                                                            type="text"
                                                            class="form-control checkInGuestName"
                                                            placeholder="请输入顾客姓名"
                                                    >
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">性别</label>
                                                <div class="col-sm-8 checkInGuestGander">
                                                    <label class="radio-inline">
                                                        <input type="radio" name="checkInGuestGander" value="男" checked> 男
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" name="checkInGuestGander"  value="女"> 女
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label  class="col-sm-3 control-label">身份证号</label>
                                                <div class="col-sm-8">
                                                    <input
                                                            type="text"
                                                            class="form-control checkInGuestIdcard"
                                                            placeholder="请输入顾客身份证号码"
                                                    >
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-3 control-label">手机号码</label>
                                                <div class="col-sm-8">
                                                    <input
                                                            type="text"
                                                            class="form-control checkInGuestPhoneNumber"
                                                            placeholder="请输入顾客电话号码"
                                                    >
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //刷新入住者表单
                function refreshGuestForm(guestNum){
                    //清空入住者表单
                    $("#guestForm").html("");
                    while(guestNum >= 1){
                        $("#guestForm").append(guestHTML);
                        guestNum--;
                    }
                }

                //在模态框显示前加载表单
                $("#checkInModal").on("show.bs.modal",  function(){
                    refreshGuestForm(1);
                    $("#checkInModal .modal-body .exceptGuestForm").val("");
                    //清空房间类型下拉单和房间号下拉单
                    $("#checkInRoomTypeId").html("");
                    $("#checkInRoomId").html("");
                    $("#guestNum").html(1);
                    //获取房间类型数据
                    $.ajax({
                        url: "/roomType/getAll",
                        type: "GET",
                        success: function (data) {
                            if(data.code === "OK") {
                                for(let i=0; i<data.data.length; i++){
                                    $("#checkInRoomTypeId").append("<option value='"+data.data[i].roomTypeId+"'>"+data.data[i].roomTypeName+"</option>");
                                }
                            }
                        }
                    })
                })

                //顾客信息模板HTML
                let guestHTML = `
                <div class="form-group addGuest">
                                <label for="checkInCost" class="col-sm-2 control-label">入住者</label>
                                <div class="col-sm-10">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">姓名</label>
                                            <div class="col-sm-8">
                                                <input
                                                        type="text"
                                                        class="form-control checkInGuestName"
                                                        placeholder="请输入顾客姓名"
                                                >
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">性别</label>
                                            <div class="col-sm-8 checkInGuestGander">
                                                <label class="radio-inline">
                                                    <input type="radio" name="checkInGuestGander" value="男" checked> 男
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" name="checkInGuestGander"  value="女"> 女
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-sm-3 control-label">身份证号</label>
                                            <div class="col-sm-8">
                                                <input
                                                        type="text"
                                                        class="form-control checkInGuestIdcard"
                                                        placeholder="请输入顾客身份证号码"
                                                >
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">手机号码</label>
                                            <div class="col-sm-8">
                                                <input
                                                        type="text"
                                                        class="form-control checkInGuestPhoneNumber"
                                                        placeholder="请输入顾客电话号码"
                                                >
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                `;

                //添加入住者
                $("#guestAdd").on("click", function (){
                    //人数等于等于3，禁用“+”按钮
                    let guestNum = parseInt($("#guestNum").html());
                    if(guestNum < 4){
                        guestNum ++;
                        $("#guestNum").html(guestNum);
                        //刷新入住者表单
                        refreshGuestForm(guestNum);
                    }
                })

                //减少入住者
                $("#guestReduce").on("click", function (){
                    let guestNum = parseInt($("#guestNum").html());
                    if(guestNum > 1){
                        guestNum --;
                        $("#guestNum").html(guestNum);
                        //刷新入住者表单
                        refreshGuestForm(guestNum);
                    }
                })

                //当房间类型改变时，刷新房间号
                $("#checkInRoomTypeId").on("change", function (){
                    //清空房间号下拉单
                    $("#checkInRoomId").html("");
                    $.ajax({
                        url: "/roomInfo/1/100000",
                        type: "GET",
                        data: {
                            roomTypeId: $("#checkInRoomTypeId").val(),
                            roomStatus: "空房"
                        },
                        success: function (data) {
                            if(data.code === "OK") {
                                for(let i=0; i<data.data.data.length; i++){
                                    rooms = data.data.data;
                                    $("#checkInRoomId").append("<option value='"+data.data.data[i].roomId+"'>"+data.data.data[i].roomNo+"</option>");
                                }
                            }
                        }
                    })
                })

                //入住登记
                $("#checkInModal .modal-footer .submit").on("click", function (){
                    //获取表单值
                    let records = [];
                    let guestNum1 = parseInt($("#guestNum").html())
                    let guestNum2 = guestNum1;
                    while (guestNum1 >= 1){
                        records[records.length] = new Object({
                            roomTypeId: $("#checkInRoomTypeId").val(),
                            roomId: $("#checkInRoomId").val(),
                            enterTime: $("#checkInEnterTime").val(),
                            exitTime: "待定",
                            bookingDuration: $("#checkInDay").val() + "天，" + $("#checkInHour").val() + "小时",
                            cost: parseInt($("#checkInCost").val())/guestNum2,
                            guestName: $($("#guestForm .checkInGuestName")[guestNum2 - guestNum1]).val(),
                            guestGander: $($("#guestForm .checkInGuestGander input:radio:checked")[guestNum2 - guestNum1]).val(),
                            guestIdcard: $($("#guestForm .checkInGuestIdcard")[guestNum2 - guestNum1]).val(),
                            guestPhoneNumber: $($("#guestForm .checkInGuestPhoneNumber")[guestNum2 - guestNum1]).val()
                        })
                        guestNum1 --;
                    }
                    console.log(records);
                    //添加记录
                    $.ajax({
                        url: "/recordInfo/checkIn",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(records),
                        success: function (data) {
                            alert(data.msg);
                            $("#checkInModal").modal("hide");
                        }
                    })
                })

            })

        </script>

        <!--修改记录-->
        <div class="modal fade" id="detailRecordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">入住记录详情</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="detailRecordId" class="col-sm-2 control-label">编号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordId"
                                            placeholder="请输入入住记录编号"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordGuestName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordGuestName"
                                            placeholder="请输入入住人姓名"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordGuestGander" class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordGuestGander"
                                            placeholder="请输入入住人性别"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordGuestIdcard" class="col-sm-2 control-label">身份证号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordGuestIdcard"
                                            placeholder="请输入入住人身份证号码"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordGuestPhoneNumber" class="col-sm-2 control-label">手机号码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordGuestPhoneNumber"
                                            placeholder="请输入入住人手机号码"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordRoomType" class="col-sm-2 control-label">房间类型</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordRoomType"
                                            placeholder="请输入入住房间类型"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordRoomNo" class="col-sm-2 control-label">房间号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordRoomNo"
                                            placeholder="请输入入住房间号"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordEnterTime" class="col-sm-2 control-label">入住时间</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordEnterTime"
                                            placeholder="请输入入住时间"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRecordExitTime" class="col-sm-2 control-label">退房时间</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control exceptGuestForm"
                                            id="detailRecordExitTime"
                                            placeholder="请输入入住时间"
                                    >
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //修改记录
                $("#detailRecordModal .modal-footer .submit").on("click", function (){
                    //获取表单信息
                    let recordInfo = new Object({
                        recordId: $("#detailRecordId").val(),
                        enterTime: $("#detailRecordEnterTime").val(),
                        exitTime: $("#detailRecordExitTime").val()
                    });
                    $.ajax({
                        url: "/recordInfo/update",
                        type: "POST",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(recordInfo),
                        success: function (data) {
                            alert(data.msg);
                            $("#detailRecordModal").modal("hide");
                        }
                    })
                })

            })

        </script>

    </div>

    <!--房间管理-->
    <div>

        <!--添加房间-->
        <div class="modal fade" id="addRoomModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加房间</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="addRoomNo" class="col-sm-2 control-label">房间号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addRoomNo"
                                            placeholder="请输入房间号"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addRoomTypeId" class="col-sm-2 control-label">房间类型</label>
                                <div class="col-sm-5">
                                    <select id="addRoomTypeId" class="form-control">
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //在模态框显示前加载表单
                $("#addRoomModal").on("show.bs.modal",  function(){
                    console.log(12345)
                    //清空表单
                    $("#addRoomModal .modal-body .form-control").val("");
                    $("#addRoomTypeId").html("");
                    //获取房间类型数据
                    $.ajax({
                        url: "/roomType/getAll",
                        type: "GET",
                        success: function (data) {
                            if(data.code === "OK") {
                                for(let i=0; i<data.data.length; i++){
                                    $("#addRoomTypeId").append("<option value='"+data.data[i].roomTypeId+"'>"+data.data[i].roomTypeName+"</option>");
                                }
                            }
                        }
                    })
                })

                //添加房间
                $("#addRoomModal .modal-footer .submit").on("click", function (){
                    //获取到房间号和房间类型
                    let addRoomType = new Object({
                        roomNo: $("#addRoomNo").val(),
                        roomTypeId: $("#addRoomTypeId").val()
                    })
                    console.log(addRoomType);
                    //添加房间
                    $.ajax({
                        url: "/roomInfo/add",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(addRoomType),
                        success: function (data) {
                            if(data.code === "OK") {
                                //关闭模态框并产生提示信息
                                $("#addRoomModal").modal("hide");
                                alert(data.msg);
                            }
                        }
                    })
                })

            })

        </script>

        <!--详情/修改-->
        <div class="modal fade" id="detailRoomModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">房间详情</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="detailRoomId" class="col-sm-2 control-label">房间编号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailRoomId"
                                            placeholder="请输入房间编号"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRoomNo" class="col-sm-2 control-label">房间号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailRoomNo"
                                            placeholder="请输入房间号"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailRoomTypeId" class="col-sm-2 control-label">房间类型</label>
                                <div class="col-sm-5">
                                    <select id= "detailRoomTypeId" class="form-control">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">房间状态</label>
                                <div class="col-sm-10" id="detailRoomStatus">
                                    <label class="radio-inline">
                                        <input type="radio" name="detailRoomStatus" value="空房" checked> 空房
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="detailRoomStatus" value="已入住"> 已入住
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="detailRoomStatus" value="未打扫"> 未打扫
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //修改
                $("#detailRoomModal .modal-footer .submit").on("click", function (){
                    //获取表单值
                    let updateRoomInfo = new Object({
                        roomId: $("#detailRoomId").val(),
                        roomNo: $("#detailRoomNo").val(),
                        roomTypeId: $("#detailRoomTypeId").val(),
                        roomStatus: $("#detailRoomStatus input:radio[name='detailRoomStatus']:checked").val()
                    })
                    //更新房间
                    console.log(updateRoomInfo);
                    $.ajax({
                        url: "/roomInfo/update",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(updateRoomInfo),
                        success: function (data) {
                            if(data.code === "OK") {
                                //关闭模态框并产生提示信息
                                $("#detailRoomModal").modal("hide");
                                alert(data.msg);
                            }
                        }
                    })
                })

            })

        </script>

    </div>

    <!--房间类型管理-->
    <div>

        <!--添加房间类型-->
        <div class="modal fade" id="addRoomTypeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加房间类型</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="addRoomTypeName" class="col-sm-2 control-label">房间类型</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="addRoomTypeName" placeholder="请输入房间类型">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addRoomTypeDescription" class="col-sm-2 control-label">描述</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="addRoomTypeDescription" placeholder="请输入房间描述">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">价格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="col-sm-4" id="addDayPrice" placeholder="单位：元/天">
                                    <input type="text" class="col-sm-4" id="addHourPrice" placeholder="单位：元/4小时">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //在模态框显示前加载表单
                $("#addRoomTypeModal").on("show.bs.modal",  function(){
                    //清空表单
                    $("#addRoomTypeModal .modal-body input").val("");
                })

                //添加房间类型
                $("#addRoomTypeModal .submit").on("click", function (){
                    let addRoomType = new Object({
                        roomTypeName: $("#addRoomTypeName").val(),
                        roomTypeDescription: $("#addRoomTypeDescription").val(),
                        dayPrice: $("#addDayPrice").val(),
                        hourPrice: $("#addHourPrice").val()
                    })
                    $.ajax({
                        url: "/roomType/add",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(addRoomType),
                        success: function (data) {
                            if(data.code === "OK") {
                                //关闭模态框并产生提示信息
                                $("#addRoomTypeModal").modal("hide");
                                alert(data.msg);
                            }
                        }
                    })
                })

            })

        </script>

        <!--房间类型详情-->
        <div class="modal fade" id="detailRoomTypeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加房间类型</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="detailRoomTypeId" class="col-sm-2 control-label">房间编号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailRoomTypeIdx"
                                            placeholder="请输入房间编号"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addRoomTypeName" class="col-sm-2 control-label">房间类型</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailRoomTypeName"
                                            placeholder="请输入房间类型"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addRoomTypeDescription" class="col-sm-2 control-label">描述</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="detailRoomTypeDescription" placeholder="请输入房间描述">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">价格</label>
                                <div class="col-sm-10">
                                    <input type="text" class="col-sm-4" id="detailDayPrice" placeholder="单位：元/天">
                                    <input type="text" class="col-sm-4" id="detailHourPrice" placeholder="单位：元/4小时">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //修改
                $("#detailRoomTypeModal .modal-footer .submit").on("click", function (){
                    //获取表单值
                    let updateRoomTypeInfo = new Object({
                        roomTypeId: $("#detailRoomTypeIdx").val(),
                        roomTypeName: $("#detailRoomTypeName").val(),
                        roomTypeDescription: $("#detailRoomTypeDescription").val(),
                        dayPrice: $("#detailDayPrice").val(),
                        hourPrice: $("#detailHourPrice").val()
                    })
                    //更新房间
                    console.log(updateRoomTypeInfo);
                    $.ajax({
                        url: "/roomType/update",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(updateRoomTypeInfo),
                        success: function (data) {
                            if(data.code === "OK") {
                                //关闭模态框并产生提示信息
                                $("#detailRoomTypeModal").modal("hide");
                                alert(data.msg);
                            }
                        }
                    })
                })

            })

        </script>

    </div>

    <!--客户管理-->
    <div>

        <!--添加客户-->
        <div class="modal fade" id="addGuestsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加顾客</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="addGuestName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addGuestName"
                                            placeholder="请输入顾客姓名"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10" id="addGuestGander">
                                    <label class="radio-inline">
                                        <input type="radio" name="addGuestGander" value="男" checked> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="addGuestGander"  value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addGuestIdcard" class="col-sm-2 control-label">身份证号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addGuestIdcard"
                                            placeholder="请输入顾客身份证号码"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addGuestPhoneNumber" class="col-sm-2 control-label">手机号码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addGuestPhoneNumber"
                                            placeholder="请输入顾客电话号码"
                                    >
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">添加</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //在模态框显示前加载表单
                $("#addGuestsModal").on("show.bs.modal",  function(){
                    //清空表单
                    $("#addGuestsModal .modal-body #addGuestName").val("");
                    $("#addGuestsModal .modal-body #addGuestIdcard").val("");
                    $("#addGuestsModal .modal-body #addGuestPhoneNumber").val("");
                })

                //添加顾客
                $("#addGuestsModal .modal-footer .submit").on("click", function (){
                    //获得表单数据
                    let addGuests = new Object({
                        guestName: $("#addGuestName").val(),
                        guestGander: $("#addGuestGander input:radio[name='addGuestGander']:checked").val(),
                        guestIdcard: $("#addGuestIdcard").val(),
                        guestPhoneNumber: $("#addGuestPhoneNumber").val()
                    })
                    console.log(addGuests);
                    //添加顾客
                    $.ajax({
                        url: "/guests/add",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(addGuests),
                        success: function (data) {
                            //关闭模态框并产生提示信息
                            $("#addGuestsModal").modal("hide");
                            alert(data.msg);
                        }
                    })
                })

            })

        </script>

        <!--修改客户-->
        <div class="modal fade" id="detailGuestsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">顾客详情</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="detailGuestId" class="col-sm-2 control-label">编号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailGuestId"
                                            placeholder="请输入顾客姓名"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailGuestName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailGuestName"
                                            placeholder="请输入顾客姓名"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10" id="detailGuestGander">
                                    <label class="radio-inline">
                                        <input type="radio" name="detailGuestGander" value="男" checked> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="detailGuestGander"  value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailGuestIdcard" class="col-sm-2 control-label">身份证号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailGuestIdcard"
                                            placeholder="请输入顾客身份证号码"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailGuestPhoneNumber" class="col-sm-2 control-label">手机号码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailGuestPhoneNumber"
                                            placeholder="请输入顾客电话号码"
                                    >
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            //修改客户
            $("#detailGuestsModal .submit").on("click", function (){
                //获取表单
                let detailGuests = new Object({
                    guestId: $("#detailGuestId").val(),
                    guestName: $("#detailGuestName").val(),
                    guestGander: $("#detailGuestGander input:radio[name='detailGuestGander']:checked").val(),
                    guestIdcard: $("#detailGuestIdcard").val(),
                    guestPhoneNumber: $("#detailGuestPhoneNumber").val()
                })
                //更新顾客
                $.ajax({
                    url: "/guests/update",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(detailGuests),
                    success: function (data) {
                        if(data.code === "OK") {
                            //关闭模态框并产生提示信息
                            $("#detailGuestsModal").modal("hide");
                            alert(data.msg);
                        }
                    }
                })
            })

        </script>

    </div>

    <!--VIP客户管理-->
    <div>

        <!--添加客户-->
        <div class="modal fade" id="addVipGuestsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">添加VIP顾客</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="addGuestName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addVipGuestName"
                                            placeholder="请输入VIP顾客姓名"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10" id="addVipGuestGander">
                                    <label class="radio-inline">
                                        <input type="radio" name="addVipGuestGander" value="男" checked> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="addVipGuestGander"  value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addVipGuestIdcard" class="col-sm-2 control-label">身份证号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addVipGuestIdcard"
                                            placeholder="请输入顾客身份证号码"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addVipGuestPhoneNumber" class="col-sm-2 control-label">手机号码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="addVipGuestPhoneNumber"
                                            placeholder="请输入顾客电话号码"
                                    >
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">添加</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            $(function (){

                //在模态框显示前加载表单
                $("#addVipGuestsModal").on("show.bs.modal",  function(){
                    //清空表单
                    $("#addVipGuestsModal .modal-body #addVipGuestName").val("");
                    $("#addVipGuestsModal .modal-body #addVipGuestIdcard").val("");
                    $("#addVipGuestsModal .modal-body #addVipGuestPhoneNumber").val("");
                })

                //添加VIP顾客
                $("#addVipGuestsModal .modal-footer .submit").on("click", function (){
                    //获得表单数据
                    let addVipGuests = new Object({
                        guestName: $("#addVipGuestName").val(),
                        guestGander: $("#addVipGuestGander input:radio[name='addVipGuestGander']:checked").val(),
                        guestIdcard: $("#addVipGuestIdcard").val(),
                        guestPhoneNumber: $("#addVipGuestPhoneNumber").val()
                    })
                    console.log(addVipGuests)
                    //添加顾客
                    $.ajax({
                        url: "/vipInfo/add",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(addVipGuests),
                        success: function (data) {
                            //关闭模态框并产生提示信息
                            $("#addVipGuestsModal").modal("hide");
                            alert(data.msg);
                        }
                    })
                })

            })

        </script>

        <!--修改客户-->
        <div class="modal fade" id="detailVipGuestsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Vip顾客详情</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="detailVipId" class="col-sm-2 control-label">编号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailVipId"
                                            placeholder="请输入顾客姓名"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailVipGuestName" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailVipGuestName"
                                            placeholder="请输入顾客姓名"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10" id="detailVipGuestGander">
                                    <label class="radio-inline">
                                        <input type="radio" name="detailVipGuestGander" value="男" checked disabled> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="detailVipGuestGander" value="女" disabled> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailVipGuestIdcard" class="col-sm-2 control-label">身份证号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailVipGuestIdcard"
                                            placeholder="请输入顾客身份证号码"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailVipGuestPhoneNumber" class="col-sm-2 control-label">手机号码</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailVipGuestPhoneNumber"
                                            placeholder="请输入顾客电话号码"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailVipCard" class="col-sm-2 control-label">VIP卡号</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailVipCard"
                                            placeholder="请输入顾客VIP卡号"
                                            disabled
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="detailVipGuestIntegral" class="col-sm-2 control-label">积分</label>
                                <div class="col-sm-10">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="detailVipGuestIntegral"
                                            placeholder="请输入顾客积分"
                                    >
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary submit">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <script>

            //修改VIP客户
            $("#detailVipGuestsModal .submit").on("click", function (){
                //获取表单
                let detailVipGuests = new Object({
                    vipId: $("#detailVipId").val(),
                    vipIntegral: $("#detailVipGuestIntegral").val()
                })
                //更新顾客
                $.ajax({
                    url: "/vipInfo/update",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json;charset=UTF-8",
                    data: JSON.stringify(detailVipGuests),
                    success: function (data) {
                        //关闭模态框并产生提示信息
                        $("#detailVipGuestsModal").modal("hide");
                        alert(data.msg);
                    }
                })
            })

        </script>

    </div>

</div>

<!--分页-->
<script>

        function setPage(mountId, currentPage, pageSum, callback) {
            //删除旧分页
            $(mountId).html("");
            if(pageSum > 1) {
                //构造新分页
                $(mountId).bootstrapPaginator({
                    currentPage: currentPage,
                    totalPages: pageSum,
                    size: "normal",
                    bootstrapMajorVersion: 3,
                    alignment: "right",
                    numberOfPages: 5,
                    itemTexts: function (type, page, callback) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        callback && callback(page, 10)
                    }
                });
            }
        }

</script>

</body>
</html>